<template>
  <div>
    <template>
      <Tabs @on-click="handleTab">
        <TabPane label="用户信息管理" name="OrderTotal"></TabPane>
        <TabPane label="用户角色管理" name="OrderNew"></TabPane>
        <TabPane label="用户权限管理" name="OrderNew1"></TabPane>
      </Tabs>
      <component :is="currentTab" keep-alive></component>
    </template>
  </div>
</template>

<script>
import OrderTotal from "./user_info.vue";
import OrderNew from "./user_role.vue";
import OrderNew1 from "./user_detail.vue";
export default {
  name: "tables_page",
  components: {
    OrderNew,
    OrderNew1,
    OrderTotal,
  },
  data() {
    return {
      currentTab: "OrderTotal", // currentTab 用于标识当前触发的子组件
    };
  },
  methods: {
    handleTab: function (name) {
      this.currentTab = name;
    },
  },
};
</script>

